{extend name="layout/default" /}
{block name="content"}
<div class="content" style="min-height: 100%; background: #E6F8F1;">
    <form class="order-form" action="{:url('order/pay')}" method="post">
        <div class="order-box">
            <div class="order-item">
                <div class="container" style="padding: 0 .5rem;">
                    <div class="order-middle">
                        <img src="{$lesson.cover}" alt="">
                        <div class="lesson-name">{$lesson.name}</div>
                        <div class="order-status">￥{$lesson.price}</div>
                    </div>
                    <div class="order-footer">
                        <span>商品总价</span>
                        <span style="float: right; font-weight: bold">￥{$lesson.price}</span>
                        <div id="discount">
                            <!-- <p class="youhui"><span>优惠码：- {$lesson.price}</span></p> -->
                        </div>
                    </div>
                    <div class="use-coupon">
                        <a href="javascript:;" class="use-coupon-btn">使用优惠码</a>
                    </div>
                    <div class="coupon">
                        <input type="text" style="width:80%;" placeholder="输入优惠码" name="coupon" value="">
                        <button type="button" name="button" id="coupon-btn">确定</button>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="buy-footer">
                <div class="buy-tips">
                    <p>实付 <span id='lesson-price'>￥{$lesson.price}</span></p>
                </div>
                <button type="button" class="buynow" style="background: #11CD6E">微信支付</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="footer"}

{/block}

{block name="script"}
<script type="text/javascript">
    $(function() {
        var lessonPrice = "{$lesson.price}", dissPrice;
        $('.use-coupon-btn').click(function() {
            $('div.coupon').toggle(300);
        })
        $('#coupon-btn').click(function() {
            $.ajax({
                url: "{:url('order/coupon')}",
                data: {code: $('input[name=coupon]').val()},
                success: function(res) {
                    if(res.code) {
                        $('#discount').html('<input type="hidden" name="coupon_id" value="'+ res.data.id +'"><p class="youhui"><span>优惠码：- '+ res.data.price +'</span></p>');
                        dissPrice = lessonPrice - res.data.price;
                        if(dissPrice <= 0) {
                            $('#lesson-price').html('￥0');
                        }else{
                            $('#lesson-price').html('￥' + dissPrice);
                        }
                    }else{
                        alert(res.msg);
                    }
                }
            })
        })
        $('.buynow').click(function() {
            $('.order-form').submit();
        })
    })
</script>
{/block}
